<template>
  <div class="header-user">
    <el-dropdown v-if="userInfo" placement="bottom" class="el-dropdown-link"
                 @command="handleCommand">
      <span class="el-dropdown-description">
        Hello, {{userInfo.userName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout">logout</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import {deleteAuthCookie} from '../../../common/js/cookie-util'
  import {mapState} from 'vuex'

  export default {
    name: 'headerUser',
    components: {},
    data() {
      return {
        greetings: '',
        options: ['logout']
      }
    },
    props: {
      greetingsList: {
        default: function () {
          return ['Good Morning', '下午好', '晚上好']
        }
      }
    },
    computed: {
      ...mapState({
        userInfo: state => {
          return state.current.currentUser
        }
      })
    },
    mounted() {
      const currentHours = new Date().getHours()
      if (currentHours < 12) {
        this.greetings = this.greetingsList[0]
      } else if (currentHours < 18) {
        this.greetings = this.greetingsList[1]
      } else {
        this.greetings = this.greetingsList[2]
      }
    },
    methods: {
      handleCommand(command) {
        if (command === 'logout') {
          this.logOut()
        }
      },
      logOut() {
        this.$confirm('Please confirm to log out the current user？', 'Logout', {
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
          type: 'warning'
        }).then(() => {
          deleteAuthCookie()
          this.$$router.push({name: 'login'})
        }).catch(() => {
          this.$message('Abort logout operation')
        })
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  .header-user
    color white
    text-align right
    font-size 14px

    .el-dropdown-description
      color white
      text-align right
      font-size 14px

    .login-text
      /*letter-spacing: 1px*/
      cursor pointer
      color dodgerblue
</style>
